ㄧ.折疊-切換內容的可見性

<div class="component demo">
  <a href="#collapse-demo" class="btn btn-primary" data-toggle="collapse">
    action link
  </a>
  <button class="btn btn-primary" data-toggle="collapse" data-target="#collapse-demo">
    action button
  </button>
  
  <div class="collapse" id="collapse-demo">
    <div class="card card-body">
      hello~
    </div>
  </div>
</div>

重點：
1.先創一個卡片，只採用card-body。另在.collapse加入#collapse-demo，在使用摺疊的時候可以呼叫這個#collapse-demo
2.a連結就採用btn的樣式btn-primary，加入data-toggle="collapse"代表使用折疊的功能以及href="#collapse-demo"呼叫卡片的id
3.button部分跟a連結差別就在於a連結有href="#collapse-demo"，button則另外加入data-target="#collapse-demo"
4.這個功能為折疊，也就是滑動的效果將內容呼叫出來。關閉的時候滑動效果隱藏

codepen
參考：bootstrap4